<template>
  <div class="videodetail">
    <!-- 左中右 -->
    <!-- 中 -->
    <div class="home-center">


      <el-page-header @back="goBack" content="视频详情页面">
      </el-page-header>


      <!-- <p class="record">上次播放:&nbsp;&nbsp;&nbsp;{{ oldName }}</p> -->
      <h2 class="title">视频名称:&nbsp;&nbsp;&nbsp;{{ videoData.video_title }}</h2>
      <div class="video-content">
        <player-video :volume="volume" ref="video" :src="src"></player-video>
      </div>


      <div class="video-detail">
        <!-- 视频介绍 -->

        <div class="video_author">
          <span>作者：{{ videoData.video_author }}</span>
          <span>{{ videoData.video_create_time }}</span>
        </div>
        <p class="video-instr">
          

          <div v-html="videoData.video_text"></div>
        </p>
      </div>

      <h2 style="margin:15px 0;">评论</h2>

      <div class="comment">
        <div class="author">

          <img class="avatar-img" v-if="userInfo.user_avatar" :src="userInfo.user_avatar" alt="">
          <el-avatar v-else icon="el-icon-user-solid"></el-avatar>

          <div class="send">
            <el-input v-model="inputComment" placeholder="输入评论"></el-input>
            <el-button type="primary" @click="send">发送</el-button>
          </div>
        </div>


        <div class="allComment" v-for="item in commentData" :key="item.comment_video_id">
          <img class="avatar-img" :src="item.user.user_avatar" alt="">
          <!-- <el-avatar icon="el-icon-user-solid"></el-avatar> -->

          <!-- <img class="avatar-img" v-if="item.user_avatar" :src="userInfo.user_avatar" alt=""> -->

          <div class="comment-detail">
            <div class="user-name">{{ item.user.user_name }}</div>
            <div class="user-comment">
              {{ item.comment_video_message }}
            </div>
            <div class="time">{{ item.comment_create_time }}</div>
          </div>

        </div>
      </div>
    </div>




  </div>
</template>
<script>
import PlayerVideo from '../components/PlayerVideo.vue'
import { videoDetail, comment, commentAdd } from '../http/request'

import { html_decode } from '../untils/handler'
export default {
  components: {
    PlayerVideo,
  },
  data() {
    return {
      volume: 0.1,
      src: 'http://vjs.zencdn.net/v/oceans.mp4',
      // imgUrl: require('@/assets/add.png'),


      // 视频名称
      videoData: {},
      userInfo: {},

      // 评论
      commentData: [],

      // 用户输入的评论
      inputComment: "",


    }
  },
  created() {

    this.getVideo(this.$route.query.video_id);

    // 获取本地的token和用户信息
    let userInfo = localStorage.getItem('useInfo');

    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);

      console.log('this.userInfo', this.userInfo);
    }
   
    // console.log('858588', );

  },

  computed: {
    video() {
      return this.$refs.video
    },
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },

    getVideo(video_id) {
      videoDetail({ video_id }).then(res => {
        console.log('视频资料', res);

        this.videoData = res.data.result[0];

        
        this.videoData.video_text = html_decode(this.videoData.video_text)


        
        this.video.toggleTv({
          src: {
            type: 'video/mp4',
            src: res.data.result[0].video_src,
          },
          load: res.data.result[0].video_pic,
        })
      }).catch(err => {
        console.log('视频失败', err);
      })

      // 获取用户的评论
      this.getComment(video_id)

    },

    getComment(video_id) {
      comment({ video_id }).then(res => {
        console.log('视频评论', res);

        this.commentData = res.data.result


      }).catch(err => {
        console.log('视频评论失败', err);
      })
    },

    // 发布评论
    send() {

      console.log('this.userInfo.token', this.userInfo.token);
      if (!this.userInfo.token) {
        this.$message({
          message: '登录才可以评论',
          type: 'error'
        });
        return
      }

      if (this.inputComment.length == 0) {
        this.$message({
          message: '评论不能为空',
          type: 'error'
        });

        return
      }

      let data = {
        video_id: this.$route.query.video_id,
        comment_video_message: this.inputComment,
        to_user_id: this.videoData.user_id,
        token: this.userInfo.token
      }

      console.log('data', data);

      // 发送请求过去
      commentAdd(data).then(res => {


        if (res.data.code == 200) {
          this.getComment(data.video_id)
        }


      }).catch(err => {
        console.log('视频评论失败', err);

      })

    },

    goBack() {
      this.$router.go(-1);
    }


  },
  beforeCreate() {
    this.volume = window.localStorage.volume
  },
}
</script>
<style lang="scss" scoped>
.videodetail {
  min-width: 1200px;
  // display: flex;

  .home-center {
    margin: 0 auto;
    padding: 30px;
    min-width: 1200px;
    width: 1200px;
    // height: 100vh;
    background: #b1bccc30;

    .announcement {
      margin-top: 20px;
      height: 50px;
      background: white;

      .horNotice {
        position: relative;
        width: 100%;
        height: 50px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        line-height: 50px;
        box-shadow: 3px 2px 8px #8f7e7e;
        padding: 0 30px;
        box-sizing: border-box;

        img {
          position: absolute;
          top: 50%;
          left: 5px;
          margin-top: -10px;
          width: 20px;
          height: 20px;
        }
      }

      .horNotice .horMove {
        position: absolute;
        top: 0;
        // left: 100%;
        white-space: nowrap;

        display: flex;

        .back {
          margin-right: 10px;
        }

        .back:hover {
          color: #1e87da;
          cursor: pointer;
        }

        // animation: moveAniHor 20s linear infinite normal;
      }

      .horNotice .horMove .item {
        font-size: 16px;
        text-shadow: 3px 1px 4px #a68241;
      }

      .horNotice .horMove .item:nth-child(2) {
        color: #ff0000;
      }

      @keyframes moveAniHor {
        0% {
          left: 100%;
        }

        50% {
          left: 0;
        }

        100% {
          left: -100%;
        }
      }
    }

    .title {
      // width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      height: 70px;
      // text-align: center;
      line-height: 70px;
    }

    .record {
      height: 40px;
      line-height: 40px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }


    .video-detail {
      padding: 10px 0;
      height: 100px;
      margin: 0 auto;
      margin-top: 20px;
      border-top: 1px solid #E3E5E7;
    }

    .video_author {

      margin-bottom: 10px;
      font-size: 16px;
      color: #1a1515;

      span {
        margin-right: 30px;
      }
    }

    .author {
      display: flex;
      justify-content: space-between;

      .send {
        display: flex;
        flex: 1;
        margin-left: 50px;
        align-items: center;
      }
    }

    .avatar-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .allComment {
      margin-top: 20px;
      display: flex;




      .comment-detail {
        margin-left: 50px;
        flex: 1;
        font-size: 14px;

        .user-name {

          color: gray;
        }



        .user-comment {
          margin: 10px 0;


        }

        .time {
          font-size: 12px;
          color: gray;
        }

      }
    }

    .video-instr {
      color: gray;
      font-size: 14px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

  }



}


.video-content {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;

  .vjs_video_3-dimensions {
    width: 100%;
  }

  .video-js {
    width: 100% !important;
  }
}

.button-group {
  margin-top: 20px;
  display: flex;
  flex: 0 0 100px;
  flex-direction: column;
  justify-content: space-between;
  // align-items: center;
}

// }
</style>
    